<template>
  <div class="pages-user-portrait">
    <div class="pages-user-portrait--title">用户画像</div>
    <div class="pages-user-portrait--top">
      <div class="pages-user-portrait--top--twinkle">
        <circle-twinkle class="pages-user-portrait--top--twinkle__left" size="15px"></circle-twinkle>
        <circle-twinkle class="pages-user-portrait--top--twinkle__right" size="15px"></circle-twinkle>
      </div>
      <div class="pages-user-portrait--top__prebtn" @click="backClick"></div>
      <div class="pages-user-portrait--top__nextbtn" @click="nextClick"></div>
    </div>
    <div class="pages-user-portrait--ltop" ref="ltop"></div>
    <div class="pages-user-portrait--rtop">
      <div class="pages-user-portrait--rtop--shang"><img src="../../assets/image/user_portrait/shang.png" alt=""></div>
      <scale-dance
        duration="10s"
        :to="0.9"
        timingFunction="ease-in-out"
        class="lt"
      >
        <span v-text="memberInfo[0].value"></span><br/>
        <span v-text="memberInfo[0].name"></span>
      </scale-dance>
      <scale-dance class="rt"
        duration="10s"
        :to="0.9"
        timingFunction="ease-in-out"
      >
        <span v-text="memberInfo[1].value"></span><br/>
        <span v-text="memberInfo[1].name"></span>
      </scale-dance>
      <scale-dance class="lb"
        duration="10s"
        :to="0.9"
        timingFunction="ease-in-out"
      >
        <span v-text="memberInfo[2].value"></span><br/>
        <span v-text="memberInfo[2].name"></span>
      </scale-dance>
      <scale-dance class="rb"
        duration="10s"
        :to="0.9"
        timingFunction="ease-in-out"
      >
        <span v-text="memberInfo[3].value"></span><br/>
        <span v-text="memberInfo[3].name"></span>
      </scale-dance>
    </div>
    <div class="pages-user-portrait--lbottom">
      <scale-dance
        duration="5s"
        :to="0.9"
        timingFunction="ease-in-out"
      >
        52%
      </scale-dance>
      <scale-dance
        duration="5s"
        :to="0.9"
        timingFunction="ease-in-out"
      >
        48%
      </scale-dance>
    </div>
    <div class="pages-user-portrait--rbottom">
      <img style="position:absolute;left:0;top:0;z-index:100;" src="../../assets/image/user_portrait/head.png" />
      <rotate class="pages-user-portrait--rbottom--rotate"><img src="../../assets/image/user_portrait/user_rotate.png" /></rotate>
      <div class="pages-user-portrait--rbottom--btn" @click="userDetailClickHandler"></div>
    </div>
    <div class="pages-user-portrait--center"></div>
  </div>
</template>

<script>
export default {
  name: 'UserPortrait',
  data() {
    return {
      echart: null,
      userAge: [
        {name: '儿童', value: 0.21}, {name: '老年', value: 0.06}, {name: '中年', value: 0.18}, {name: '熟龄青年', value: 0.16},
        {name: '青年', value: 0.15}, {name: '少年', value: 0.24}
      ],
      memberInfo: [
        {name: '多成员家庭', value: "23%"}, {name: '三口之家', value: "31%"}, {name: '两口之家', value: "27%"}, {name: '独身用户', value: "19%"}
      ]
    }
  },
  mounted() {
    let max = 0;
    const values = this.userAge.map(item => {
      if (max < item.value) max = item.value;
      return item.value;
    });
    this.userAge.forEach(item => item['max'] = max);
    this.echart = this.$Echarts.init(this.$refs.ltop);
    this.echart.setOption({
      radar: {
        name: {
          textStyle: {
            color: 'rgb(0, 233, 255)',
            fontSize: 26
          },
          formatter: (name, indicator) => `${indicator.name} ${indicator.value * 100}%`
        },
        indicator: [...this.userAge],
        splitArea: {
          areaStyle: {
            color: ['rgba(0,234,255,1)', 'rgba(0,234,255,0.8)', 'rgba(0,234,255,0.6)', 'rgba(0,234,255,0.4)', 'rgba(0,234,255,0.2)']
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgb(0, 233, 255)'
          }
        },
        axisLine: {
          lineStyle: {
            color: 'rgb(0,234,255)'
          }
        }
      },
      series: [{
          type: 'radar',
          lineStyle: {
            color: 'rgb(0,234,255)',
            width: 2
          },
          data: [
              {
                  value: values,
              }
          ]
      }]
    })
  },
  methods: {
    backClick() {
      this.$router.push({name: 'Rating'})
    },
    nextClick() {
      
    },
    userDetailClickHandler() {
      
    }
  }
}
</script>

<style lang="less" scoped>
@import "./style.less";
</style>